<!-- seach START -->
<div class="seach-wrap">
    <div nz-space class="seach-rt">
        <div *nzSpaceItem class="seach-item">
            <label class="seach-label">机型</label>
            <div class="seach-control">
                <input nz-input [(ngModel)]="queryForm.name" placeholder="请输入机型">
            </div>
        </div>

        <div *nzSpaceItem class="seach-item">
            <label class="seach-label">品牌名称</label>
            <div class="seach-control">
                <input nz-input [(ngModel)]="queryForm.brandName" placeholder="请输入品牌名称">
            </div>
        </div>

        <div *nzSpaceItem class="seach-item">
            <label class="seach-label">类型</label>
            <div class="seach-control">
                <nz-select ngModel="全部" [(ngModel)]="queryForm.type">
                    <nz-option nzLabel="全部" nzValue=""></nz-option>
                    <nz-option nzLabel="手机" nzValue="1"></nz-option>
                    <nz-option nzLabel="平板" nzValue="2"></nz-option>
                </nz-select>
            </div>
        </div>

        <div *nzSpaceItem class="seach-item">
            <button nz-button nzType="primary" class="mrt8" (click)="query()">查询</button>
            <button nz-button nzType="default" (click)="reset()">重置</button>
        </div>
    </div>
</div>
<!-- seach END -->

<main>
    <nz-table #basicTable [nzData]="listOfData?.records" [nzShowPagination]="false" [nzPageSize]="listOfData?.size"
    [nzLoading]="tableLoading" nzBordered>
        <thead>
            <tr>
                <th nzAlign="center">ID</th>
                <th nzAlign="center">类型</th>
                <th nzAlign="center">品牌名称</th>
                <th nzAlign="center">机型</th>
                <th nzAlign="center">机型排序</th>
                <th nzAlign="center">最高回收价</th>
                <th nzAlign="center">图片</th>
                <th nzAlign="center">更新时间</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngIf="searchHint && listOfData?.records">
                <td class="searchHint" nzAlign="center" colspan="13">
                    <span>搜索 “{{searchName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
                    <a (click)="backList()">返回原列表</a>
                </td>
            </tr>
            <tr *ngFor="let data of basicTable.data">
                <td nzAlign="center">{{ data.id }}</td>
                <td nzAlign="center">{{ data.type == 1 ? '手机' : '平板' }}</td>
                <td nzAlign="center">{{ data.brandName }}</td>
                <td nzAlign="center">{{ data.name }}</td>
                <td nzAlign="center">{{ data.sort }}</td>
                <td nzAlign="center">{{ data.price }}</td>
                <td nzAlign="center">
                    <img nz-image nzSrc="{{data.imgSrc}}" [nzFallback]="fallback" />
                </td>
                <td nzAlign="center">{{ data.updateTime }}</td>
            </tr>
        </tbody>
    </nz-table>
    <div class="pagination-box">
        <div class="pagination-template">
            <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>
            <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]"nzShowSizeChanger nzShowQuickJumper [nzPageIndex]="1" [nzTotal]="listOfData?.total"
                [nzShowTotal]="totalTemplate" [nzPageSize]="queryForm.pageSize" [nzPageIndex]="queryForm.pageNum"
                (nzPageIndexChange)="onPageIndexChange($event)" (nzPageSizeChange)="onPageSizeChange($event)">
            </nz-pagination>
        </div>
    </div>
</main>